<template>

    <page-view class="menu">
        <page-header></page-header>

        <div class="content-box" ref="contentBoxDOM" @scroll="contentBoxScroll($event)">
        
<div class="header-box">

<swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <swipe-item v-for="(item,index) in bannerImg" :key="index">
        <van-image :src="item" width="100%" height="auto"></van-image>
    </swipe-item>
    
</swipe>
</div>
        
        </div>

    </page-view>
   
</template>

<script>
import {reactive,ref} from 'vue'
import { Swipe, SwipeItem,Image as VanImage } from 'vant';
export default {
    name:'Menu',
    components:{Swipe, SwipeItem, VanImage},
    setup () {
        let contentBoxDOM=ref(null);
        function contentBoxScroll(e){

        }
        let bannerImg=reactive([
            require("../assets/image/a1.png"),
            require("../assets/image/a2.png"),
            require("../assets/image/a3.png"),
            require("../assets/image/a4.png"),

        ])

        return {bannerImg,contentBoxScroll,contentBoxDOM}
    }
}
</script>

<style lang="scss" scoped>

</style>